<template>
    <div class="box" v-for="item in names" :key="item.id">
        这是{{item.name}}第几个<input type="text">
    </div>
    <button @click="addName">加一个</button>
    <br>
    {{ number }}
    <br>
    <button @click="number++">加一个</button>
    <el-button 
    @click="addNumber" 
    type="success" 
    plain 
    :icon="Search" 
    :loading="isLoading"
    :disabled="isLoading">加一个</el-button>
</template>
<script>
import {Search} from '@element-plus/icons-vue'
export default {
  name: 'day4',
  setup() {
    return {
      Search,
    };
  },
  methods: {
    addName(){
      //从头部添加一个赵六
      this.names.unshift({id:4,name:'赵六'})
    },
    addNumber(){
        this.isLoading = true
        setTimeout(() => {
            this.number++
            this.isLoading = false
        }, 2000);
    }
  },
  data() {
    return {
      isLoading:false,
      number: 1,
      names: [
        {id:1,name:'张三'},
        {id:2,name:'李四'},
        {id:3,name:'王五'}
      ]
    }
  },
  watch: { // 监视 属性
    number(newValue, oldValue) {
        if(newValue > 10){
            this.number = 10
        }
        console.log("number的值变了，新值是"+newValue+"，旧值是"+oldValue)
    }
  },
  mounted() {
    console.log("我已经挂载完毕，可以找后端要数据了")
  }
}

</script>
<style scoped>
.box{
    width: 100%;
    height: 20px;
    background-color: aquamarine;
    margin-top: 10px;
}
</style>